<template>
	<view>
		<view class="avatar" @click="upload">
			<u-image shape="circle" width="156rpx" height="156rpx" :src="userInfo.avatar">
			</u-image>
			<view class="u-font-12 color-3 u-m-t-14 u-m-b-20">点击修改头像</view>
		</view>
		<view class="u-p-48 form">
			<u-form :model="form" :border-bottom="false">

				<view class="u-m-t-24 bg-white border-r-6 u-p-l-16">
					<u-form-item label-width="100" :border-bottom="false" label="昵称">
						<u-input height="68" :clearable="false" v-model="userInfo.nickname" placeholder="请输入您的昵称" />
					</u-form-item>
				</view>

				<view class="u-m-t-24 bg-white border-r-6 u-p-l-16">
					<u-form-item label-width="100" :border-bottom="false" label="姓名">
						<u-input height="68" :clearable="false" v-model="userInfo.name" placeholder="请输入您的姓名" />
					</u-form-item>
				</view>

				<view class="u-m-t-24">
					<u-form-item :border-bottom="false">
						<radio-button height="44px" bg-color="#fff" v-model="userInfo.sex" :list='sexList'>
						</radio-button>
					</u-form-item>
				</view>

				<view class="u-m-t-24 bg-white border-r-6 u-p-l-16">
					<u-form-item label-width="100" :border-bottom="false" label="生日">
						<view class="u-rela">
							<u-icon size="40" color="#808080" class="u-abso arrow" name="arrow-right"></u-icon>
							<u-input height="68" disabled @click="showTimeSelect = true" :custom-style="inputStyle"
								v-model="userInfo.birthday" placeholder="请选择日期" />
						</view>
						<u-picker v-model="showTimeSelect" mode="time" @confirm="handleSelectTime"></u-picker>
					</u-form-item>
				</view>

				<view class="u-m-t-24 bg-white border-r-6 u-p-l-16">
					<u-form-item label-width="100" :border-bottom="false" label="手机号">
						<u-input height="68" :clearable="false" v-model="userInfo.mobile" placeholder="请输入手机号" />
					</u-form-item>
				</view>


				<view class="u-m-t-24 bg-white border-r-6 u-p-l-16">
					<u-form-item label-width="100" :border-bottom="false" label="微信">
						<u-input height="68" :clearable="false" v-model="userInfo.wechat" placeholder="请输入您的微信" />
					</u-form-item>
				</view>


				<view class="u-m-t-24 bg-white border-r-6 u-p-l-16">
					<u-form-item label-width="100" :border-bottom="false" label="Q Q">
						<u-input height="68" :clearable="false" v-model="userInfo.qq" placeholder="请输入您的QQ" />
					</u-form-item>
				</view>

				<view class="u-m-t-24 bg-white border-r-6 u-p-l-16">
					<u-form-item label-width="100" :border-bottom="false" label="邮箱">
						<u-input height="68" :clearable="false" v-model="userInfo.email" placeholder="请输入您的邮箱" />
					</u-form-item>
				</view>


			</u-form>
		</view>
		<view class="submit">
			<view class="btn" @click="submit">修改资料</view>
		</view>
	</view>
</template>

<script>
	import radioButton from '@/components/radioButton/radioButton.vue';
	import {
		baseUrl
	} from '@/config';
	import {
		sexList
	} from '@/const';
	import {
		getUserInfo,
		saveUserInfo
	} from '@/api/user'
	export default {
		components: {
			radioButton
		},
		data() {
			return {
				userInfo: {},
				showTimeSelect: false,
				sexList: [sexList[0], sexList[1]],
			}
		},
		mounted() {
			this.getUserInfo();
		},
		methods: {
			async getUserInfo() {
				const res = await getUserInfo();
				this.userInfo = res.data;
			},
			handleSelectTime(val) {
				let {
					year,
					month,
					day
				} = val;
				const current = parseInt(+new Date() / 1000);
				if (val.timestamp > current) {
					year = new Date().getFullYear();
					month = new Date().getMonth() + 1;
					day = new Date().getDate();
				}
				this.userInfo.birthday = `${year}-${month}-${day}`;

			},
			upload() {
				uni.chooseImage({
					count: 1,
					success: async (res) => {
						const filePath = res.tempFilePaths[0];
						uni.uploadFile({
							url: baseUrl + '/common/uploads/upload',
							filePath,
							name: 'file',
							formData: {
								dir: 'avatar',
								filetype: 'image'
							},
							success: (sub) => {
								const imgInfo = JSON.parse(sub.data).data;
								this.userInfo.avatar = imgInfo.filepath;
							}
						})
					}
				})
			},
			async submit() {
				const sub = await saveUserInfo(this.userInfo);
				if (sub.code === 1) {
					uni.showModal({
						showCancel: false,
						content: '修改成功',
						confirmColor: '#333',
						success: (res) => {
							if (res.confirm) {
								uni.navigateBack();
							}
						}
					});
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.avatar {
		background-color: #FFCF0B;
		height: 244rpx;
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.arrow {
		right: 0;
		z-index: 1;
		top: 50%;
		transform: translateY(-50%);
		color: #FFCF0B;
	}

	.submit {
		padding: 32rpx;

		.btn {
			height: 44px;
			line-height: 44px;
			color: #333333;
			font-size: 16px;
			background: #FFCF0B;
			border-radius: 22px;
			text-align: center;
		}
	}
</style>
